<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-20 14:27:03
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-11-22 15:39:36
 * @FilePath: /nhw/src/views/Home/index.vue
-->
<template>
  <div
    class="home-continer"
    :style="{ paddingBottom: $store.state.tabbarHeight + 'px' }"
  >
    <!-- <transition appear mode="out-in"> -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <!-- </transition> -->
    <Tabbar ref="container" />
  </div>
</template>

<script>
import Tabbar from "components/Tabbar";
// import request from "@/api";
// import qs from "qs";
export default {
  name: "Home",
  components: {
    Tabbar,
  },
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.getTabbarHeight();
  },
  methods: {
    getTabbarHeight() {
      this.$store.state.tabbarHeight =
        this.$refs.container.$el.getBoundingClientRect().height;
    },
  },
};
</script>

<style lang="less" scoped>
.home-continer {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
</style>